<template>
    <div class="app-container">
        <h1>App 根组件 --- {{ countFromSon }}</h1>
        <hr />

        <div class="box">
            <!-- 父向子传值 -->
            <Left :msg="message" :user="userinfo"></Left>
            <!-- 子向父传值 -->
            <Right @numchange="getValFromSon"></Right>
        </div>
    </div>
</template>

<script>
    import Left from './components/Left.vue'
    import Right from './components/Right.vue'

    export default {
        data() {
            return {
                message: 'hello vue.js！',
                userinfo: {
                    username: 'zwt',
                    age: 21
                },
                // 定义变量来接收子组件传来的值
                countFromSon: 0
            }
        },
        methods: {
            // val作用类似于事件中的event对象
            getValFromSon(val) {
                this.countFromSon = val
            }
        },
        components: {
            Left,
            Right
        }
    }
</script>

<style lang="less" scoped>
.app-container {
    padding: 1px 20px 20px;
    background-color: #efefef;
}
.box {
    display: flex;
}
</style>